<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/file/upload" th:action="@{/file/upload}" method="post" type="file" enctype="multipart/form-data">
    <input id="upload-file" type="file" name="file" accept=".jpg,.png,"/><br/><br>
    <input id="btn" type="submit" value="上传文件" />
</form>

</body>
<script src="../static/js/jquery-3.4.1.min.js" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script>
    $('#upload-file').change(function() {
        fileValid(this, 2048, 'image', function() {
            alert('success')
        })
    })

    //验证上传文件大小和类型
    /**
     *
     * @param {this} value_ [获取input对象，一般为this]
     * @param {[number]} size_ [文件限制的大小，单位为kb]
     * @param {[string]} type_ [文件类型，当前支持image和office]
     * @param {[function]} callback [验证通过的回调]
     */
    function fileValid (value_, size_, type_, callback) {
        const file = value_.files[0]
        const fileSize = (file.size / 1024).toFixed(0)
        const fileType = value_.value.substring(value_.value.lastIndexOf("."))

        if (fileSize > size_) {
            alert('文件过大')
            console.log('文件过大')
            return false
        }

        switch (type_) {
            case 'image':
                if (!fileType.match(/.jpg|.jpeg|.png|.bmp/i)) {
                    alert('请上传图片')
                    return false;
                }
                break;
            case 'office':
                if (!fileType.match(/.doc|.docx|.xls|.xlsx|.ppt|.pptx/i)) {
                    alert('请上传word、excel或ppt文件')
                    return false;
                }
                break;
            default:
                console.error('type_参数设置不正确！')
                return false;
                break;
        }

        callback()
    }
</script>
</html>